{% extends "base.html" %}

{% block title %}语音测试{% endblock %}

{% block sidebar %}
<div class="list-group">
    <a href="{{ url_for('audio_monitor') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_monitor' %}active{% endif %}"><i class="bi bi-mic"></i> 声音监控</a>
    <a href="{{ url_for('audio_wake') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_wake' %}active{% endif %}"><i class="bi bi-mic-fill"></i> 语音唤醒</a>
    <a href="{{ url_for('audio_tts') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_tts' %}active{% endif %}"><i class="bi bi-chat-text"></i> 语音合成</a>
    <a href="{{ url_for('audio_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_test' %}active{% endif %}"><i class="bi bi-volume-up"></i> 播放测试</a>
    <a href="{{ url_for('audio_speak_test') }}" class="list-group-item list-group-item-action {% if request.endpoint == 'audio_speak_test' %}active{% endif %}"><i class="bi bi-mic"></i> 语音识别</a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid px-2">
    <div class="row">
        {# <div class="col-md-3">
            <!-- 可放置设置或说明 -->
        </div> #}
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">语音测试</h4>
                </div>
                <div class="card-body">
                    <form id="ttsForm">
                        <div class="form-group">
                            <label for="text">输入要播报的文本：</label>
                            <textarea class="form-control" id="text" rows="4" required></textarea>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="voiceType">语音类型：</label>
                                    <select class="form-select" id="voiceType">
                                        <option value="female">女声</option>
                                        <option value="male">男声</option>
                                        <option value="child">童声</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="speed">语速：</label>
                                    <input type="range" class="form-range" id="speed" min="0" max="100" value="50">
                                    <div class="text-center" id="speedValue">50</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="volume">音量：</label>
                                    <input type="range" class="form-range" id="volume" min="0" max="100" value="80">
                                    <div class="text-center" id="volumeValue">80</div>
                                </div>
                            </div>
                        </div>
                        <div class="d-grid gap-2 mt-3">
                            <button type="button" class="btn btn-primary" id="startButton">
                                <i class="bi bi-play-circle"></i> 开始播报
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 更新滑块值显示
    document.getElementById('speed').addEventListener('input', function() {
        document.getElementById('speedValue').textContent = this.value;
    });

    document.getElementById('volume').addEventListener('input', function() {
        document.getElementById('volumeValue').textContent = this.value;
    });

    // 处理播报请求
    document.getElementById('startButton').addEventListener('click', async function() {
        const text = document.getElementById('text').value;
        if (!text) {
            alert('请输入要播报的文本');
            return;
        }

        const voiceType = document.getElementById('voiceType').value;
        const speed = document.getElementById('speed').value;
        const volume = document.getElementById('volume').value;
        
        try {
            const response = await fetch('/api/tts', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    text: text,
                    voice_type: voiceType,
                    speed: parseInt(speed),
                    volume: parseInt(volume)
                })
            });
            
            const data = await response.json();
            
            if (response.ok) {
                alert('播报成功！');
            } else {
                alert(`播报失败：${data.error}`);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('发生错误，请重试！');
        }
    });
});
</script>
{% endblock %} 